<template>
  <div>
    <div class="center">
      <grid :show-lr-borders="false">
        <grid-item class="toutu">
          <img src="../../static/img/toutu@2x.png"/>
        </grid-item>
      </grid>
      <grid :show-lr-borders="false">
        <grid-item label="Grid">
          <img slot="icon" src="../assets/grid_icon.png">
        </grid-item>
      </grid>
    </div>
    <br>
  </div>
</template>

<script>
import { Cell, Group, Badge, Divider, Grid, GridItem } from 'vux'

import pkg from '../../package.json'
const version = pkg.version
const vueVersion = pkg.devDependencies.vue

export default {
  components: {
    Cell,
    Group,
    Badge,
    Divider,
    Grid,
    GridItem
  },
  data () {
    return {
      version,
      vueVersion
    }
  }
}
</script>

<style scoped>
.vue-version {
  text-align: center;
  font-size: 12px;
  color: #ccc;
}
.toutu{
  position:relative;
  width: 100%;
  height:0;
  padding-top:100%;
}
.toutu img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.center {
  text-align: center;
}
.vux-notice {
  color: #666;
  line-height: 40px;
}
.demo-icon {
  margin-right: 15px;
}
.vux-title {
  vertical-align: middle;
  text-align: center;
  color: #04BE02;
  display: inline-block;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
}
body {
  font-family: Helvetica, sans-serif;
  background-color: #fbf9fe;
}
.demo-tip {
  background-color: #fefcec;
  color: #f76a24;
  font-size: 12px;
  padding: 5px 10px;
  margin-top: 15px;
}
</style>
